利用 Docker 部署 Vue 应用

发表于 | 分类于 | 阅读次数：

前言

初步学习 Docker 以后，我将尝试使用 Docker 部署之前构建的 Vue.js 应用。在实际部署的时候采用的是 vue-cli-service 打包，用 Nginx 作为代理服务器。

打包 Vue 应用

首先在 Vue 项目路径利用 vue-cli-service 打包 Vue 应用：

1
$ vue-cli-service build

这样在路径中会生成 dist 文件夹，里面的文件经过了压缩和混淆，可以加快项目运行速度并且保护代码不被轻易拷贝。

编写 Dockerfile

通过在项目路径下编写 Dockerfile 文件来构建我们应用的镜像。本次的利用 Nginx 作为代理服务器，Dockerfile 内容如下：

1
2
3
# Dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/

除了 Dockerfile 文件以外，最好编写一下 .dockerignore 文件，里面的内容会在构建镜像的时候会被 Docker 忽略，但是本文中不需要，这里做一下 .dockerignore 的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# .dockerignore
node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
.env
*/bin
*/obj
README.md
LICENSE
.vscode

构建镜像

在项目路径下运行以下命令：

1
2
3
4
5
6
7
8
$ docker build -t graph-visulization 
Sending build context to Docker daemon  10.85MB
Step 1/2 : FROM nginx:alpine
 ---> d3dcc25e0dc4
Step 2/2 : COPY dist/  /usr/share/nginx/html/
 ---> 8ce393533061
Successfully built 8ce393533061
Successfully tagged graph-visulization:latest

运行镜像

在项目路径下运行以下命令：

1
2
$ docker run -p 88:80 -d graph-visulization
1542c718b8264db2de2d7d0bc727744a45643e4c8f46d7f0a9167102be591489

-p 88:80 的作用是将容器中的 80 端口映射到本机的 88 端口
-d 的作用是后台运行

在浏览器输入 localhost:88 即可看到已经运行的 Vue 应用：

image-20181109192428410

Push 镜像到 Docker Repository

首先登录 Docker Cloud 创建和本地镜像名字一致的仓库，我这里就是 ryanligod/graph-visulization :

image-20181109214643914

然后给本地镜像打上用户名和 tag：

1
2
3
# docker tag <existing-image> <hub-user>/<repo-name>[:<tag>]
# 这里的tag不指定就是latest。 
$ docker tag graph-visulization ryanligod/graph-visulization:latest

最后 push 镜像：

1
2
3
4
5
6
7
# 首先需要登录
$ docker login
Authenticating with existing credentials...
Login Succeeded

# docker push <hub-user>/<repo-name>:<tag>
$ docker push ryanligod/graph-visulization:latest

然后就可以在自己仓库中发现上传的镜像：

image-20181109215229338

之后就可以使用 docker pull 拉取自己的镜像了：

1
2
# docker pull <hub-user>/<repo-name>:<tag>
$ docker pull ryanligod/graph-visulization:latest

通过 Github 新提交自动部署

Docker Cloud 和 DaoCloud 都支持通过监视 Github 仓库改动自动通过 Dockerfile 构建镜像，但是目前不想把 dist 文件夹也推送到 Github，所以暂时先不设置。

image-20181109220432931

构建小而牢固的容器镜像

减小镜像体积有两种方式：

  1. 使用较小的基础镜像（如 alpine-Linux）
  2. 使用 Builder pattern

这里仅介绍 alpine，以后有空了再深入研究一下Builder pattern。选择了 nginx:alpine 是因为 alpine 镜像较为精简以及安全，这样构建的目标镜像体积较小。在安全上，而且由于可攻击的表面积小了，漏洞较少。在性能上，构造小镜像在部署速度上可以极大提高。以下为 nginx:alpine 和 nginx:1.15 镜像对比：

1
2
3
4
5
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
graph-visulization  latest              8ce393533061        2 hours ago         28MB
nginx               alpine              d3dcc25e0dc4        2 days ago          17.8MB
nginx               1.15                62f816a209e6        2 days ago          109MB
0%